<template>
  <div id="Know">
    <!-- 站内导航 -->
    <div class="TopNav">
      <TopNav></TopNav>
    </div>
    <!-- 菜单 -->
    <div class="LeftMenu">
      <LeftMenu></LeftMenu>
    </div>
    <!-- 中部菜单 -->
    <div class="MidMenu">
      <MidMenu v-on:tabTo="tabTo"></MidMenu>
    </div>
    <!--知识归档-->
    <el-collapse v-model=fileData.indexOf(fileData[0]) @change="" accordion class="knowFile" name="0">
      <router-link to="/know?type=all" @click.native="typeFile({type: 'al'})">
        <img src="src/assets/image/sunBook.png" alt="" style="width: 100%;height: 100px;cursor: grab">
      </router-link>    <!-- -->
      <el-collapse-item v-for="(item, index) in fileData" :key="index" :name="index">
        <template slot="title">
          <span class="fileTitle"> {{ '-' + item.type + '-' }}</span>
        </template>
        <el-card v-for="(it, i) in fileTag?fileTag:item.data" :key="i" @click.native="subtypeCard(it.type)"
                 class="fileCard" :style="fileTypeStyle(it.type)">
          <span>{{ it.type }}</span>
          <el-divider direction="vertical"></el-divider>
          <span style="color: slategrey;font-size: 10px;">{{ it.typeTotal }}类</span>
          <span style="color: slategrey;font-size: 10px;">{{ it.total }}篇</span>
        </el-card>
      </el-collapse-item>
    </el-collapse>
    <!-- 知识卡片 -->
    <div class="knowCards">
      <el-row v-for="(item, i) in knowData" :key="i" class="knowCardRow" type="flex" justify="center" title="点击查看">
        <router-link :to='route.path+item.link' :title='item.title' style="display: flex;">
          <el-col class="knowCardCol">
            <!--shadow="always"-->
            <el-card class="knowCard">
              <div class="knowCardItem">
                <div><img :src="item.image?item.image:'http://codeworld.fun/res/icons/CodeWorld.ico'" alt=""
                          style="width: 60px;height: 60px;"></div>
                <div style="margin-left: 10px">
                  <h4>{{ item.subtype }}</h4>
                  <p style="font-size: 12px;opacity: 0.7;margin-top: -15px;">
                    {{ item.type }}
                    <el-divider direction="vertical"></el-divider>
                    <span style="color: #333;font-size: 10px;">{{ item.total }}篇</span>
                  </p>
                  <p style="font-size: 12px;color: #333;">{{ item.tip + item.type }}</p>
                </div>
              </div>
            </el-card>
          </el-col>
        </router-link>
      </el-row>
    </div>
    <!-- 页脚 -->
    <div class="Footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import LeftMenu from '../../components/head/LeftMenu'
import TopNav from '../../components/head/TopNav'
import MidMenu from "../../components/head/MidMenu";
import Footer from '../../components/foot/Footer'
import knowledge from '../../apis/Knowledge'

export default {
  name: 'Know',
  components: {LeftMenu, TopNav, MidMenu, Footer},

  data() {
    return {
      route: this.$route,
      searchTip: '站内搜索',
      inputValue: '',
      knowDataAll: [
        {link: "/detail?type=编程语言&subtype=Java", subtype: "Java", type: "编程语言", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=PHP", subtype: "PHP", type: "编程语言", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=Python", subtype: "Python", type: "编程语言", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=C", subtype: "C", type: "编程语言", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=" + encodeURIComponent("C++"), subtype: "C++", type: "编程语言", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=" + encodeURIComponent("C#"), subtype: "C#", type: "编程语言", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=", subtype: "Rest", type: "编程语言", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=", subtype: "GO", type: "编程语言", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=", subtype: "R", type: "编程语言", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=", subtype: "DART", type: "编程语言", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=", subtype: "Lua", type: "编程语言", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=", subtype: "Shell", type: "编程语言", image: "", tip: '这是一个不错的'},
        {
          link: "/detail?type=编程环境程序&subtype=",
          subtype: "Node",
          type: "编程环境程序",
          image: "",
          tip: '是一个基于 Chrome V8 引擎的 Javascript 运行环境'
        },
        {link: "/detail?type=编程语言&subtype=", subtype: "JS", type: "编程语言", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=", subtype: "Html", type: "编程语言", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程语言&subtype=", subtype: "Css", type: "编程语言", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程数据系统&subtype=", subtype: "Mysql", type: "编程数据系统", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程数据系统&subtype=", subtype: "Oracle", type: "编程数据系统", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程数据系统&subtype=", subtype: "MongoDB", type: "编程数据系统", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程数据系统&subtype=", subtype: "Redis", type: "编程数据系统", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程缓存系统&subtype=", subtype: "Memcache", type: "编程缓存系统", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程消息系统&subtype=", subtype: "Kafka ", type: "编程消息系统", image: "", tip: '这是一个不错的'},
        {
          link: "/detail?type=编程服务器系统&subtype=",
          subtype: "Nginx",
          type: "编程服务器系统",
          image: "",
          tip: '是一个高性能的HTTP和反向代理web服务器'
        },
        {link: "/detail?type=编程框架&subtype=", subtype: "Spring", type: "编程框架", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程框架&subtype=", subtype: "Vue", type: "编程框架", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程框架&subtype=", subtype: "Uniapp", type: "编程框架", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程设计&subtype=编程设计", subtype: "编程设计", type: "编程算法", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程算法&subtype=编程算法", subtype: "编程算法", type: "编程算法", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程操作系统&subtype=", subtype: "Linux", type: "编程操作系统", image: "", tip: '这是一个不错的'},
        {link: "/detail?type=编程操作系统&subtype=", subtype: "Windows", type: "编程操作系统", image: "", tip: '这是一个不错的'},
      ],
      knowData: [],
      fileData: [
        {
          type: "编程",
          data: [
            {type: "编程语言", total: 20, typeTotal: 1},
            {type: "编程组件", total: 30,},
            {type: "编程框架", total: 10,},
            {type: "编程数据系统", total: 10,},
            {type: "编程操作系统", total: 2,},
            {type: "编程设计", total: 100,},
            {type: "编程算法", total: 100,},
          ]
        },
        {
          type: "机电",
          data: [
            {type: "单片机", total: 100,},
            {type: "CAD", total: 100,},
            {type: "半导体", total: 10,},
          ]
        },
      ],
      fileTag: [],
    }
  },
  created() {
    if (!this.tabToHad) {
      const data = this.route.query;
      data.type = data.type ? data.type.slice(0, 2) : data.type
      this.typeFile(data);
      console.log(data, this.route.query)
      this.subtypeCards(this.route.query);
    }
  },
  methods: {
    tabTo(e) {
      this.tabToHad = true;
      this.typeFile({type: e})
      this.subtypeCards({type: e});
      this.route.query.type = e;
    },
    typeFile(data) {
      if (!data.type) {
        this.fileTag = []
        //todo  all连表查询章节、篇数
      } else {
        this.fileData = [{}]
        this.fileData[0].type = data.type
        data.groupFields = 'type';
        knowledge.list(data).then((res) => {
          if (res.status === 200 && res.data) {
            //this.fileData[0].data = res.data;
            this.fileTag = res.data;
          } else {
            console.log(res);
          }
        })
      }
    },
    fileTypeStyle(type) {
      if (type === this.route.query.type) {
        return "color: deepskyblue; box-shadow: 2px 0 cyan; padding: 1px;"
      }
    },
    subtypeCards(data) {
      if (!data.type) {
        //todo  all连表查询章节、篇数
        //data.type = 'all';
        this.knowData = this.knowDataAll
        return
      } else {
        data.groupFields = 'type,subtype';
      }
      knowledge.list(data).then((res) => {
        if (res.status === 200 && res.data) {
          this.knowDataAll = res.data;
          this.knowDataAll.forEach(i => {
            i.link = "/detail?type=" + i.type + "&subtype=" + encodeURIComponent(i.subtype)
            i.tip = "这是一个不错的"
          })
          this.knowData = this.knowDataAll
        } else {
          console.log(res);
        }
      })
    },
    subtypeCard(type) {
      console.log(type);
      this.knowData = JSON.parse(JSON.stringify(this.knowDataAll)).filter(item => item.type === type)
      this.route.query.type = type
    },

  },
}
</script>

<!-- Add "scoped"  attribute to limit CSS to this component only -->
<style scoped>
#Know {
  background: url("src/assets/image/cloudForest.jpg");
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  position: fixed;
  margin-left: -8px;
  margin-top: -8px;
  color: white;
}

.LeftMenu {
}

.TopNav {
}

.MidMenu {
}

.knowFile {
  float: left;
  width: 12%;
  height: 85.9%;
  /*上右下左*/
  margin: 40px 0.2% 1% 15%;
  overflow: auto;
  text-align: center;
  background: aliceblue;

}

.fileTitle {
  width: 100%;
  margin-left: 25px;
  font-weight: bold;
  font-size: 15px;
  color: darkcyan;
  cursor: grab;
}

.fileCard {
  cursor: pointer;
  width: 92%;
  margin: 4%;
  color: darkcyan;
  font-size: 13px;
}

.fileCard:hover {
  color: deepskyblue;
  box-shadow: 2px 0 cyan;
  padding: 1px;
}

.knowCards {
  height: 86%;
  /*上右下左*/
  margin: 40px 14% 1% auto;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  border-left: thin solid linen;
}

.knowCardRow {
  width: 24.5%;
  height: 20%;
  cursor: pointer;
  padding: 1.5%;
}

.knowCardCol {
  padding-left: 2%;
}

.knowCard {
  width: 100%;
  height: 100%;
  background: white;
  color: dimgrey;
  border: thin dotted lightskyblue;
}

.knowCard:hover {
  /*box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 内外阴影inset，默认外阴影 */
  box-shadow: 3px 3px 1px 0 greenyellow;
  margin: -2px;
}

.knowCardItem {
  width: 100%;
  height: 100%;
  color: dodgerblue;
  display: flex;
}

.knowCardItem p h4 {
  margin-left: 10px;
  margin-right: 10px;
}

.knowCardItem img {
  width: 100px;
  height: 90px;
  margin-top: 20px;
}

a {
  color: snow;
  text-decoration: none;
}

</style>
